<template>
    <!-- 筛选搜索 -->
    <div class="search-box">
        <div class="search">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button @click="Reset">重置</el-button>
                <el-button type="primary" @click="ListFn">查询搜索</el-button>
            </div>
        </div>


        <div class="search">
            <span>角色名称:</span>
            <el-input placeholder="请输入角色名称" v-model="form.keyword"></el-input>
        </div>
    </div>
    <!-- 数据列表 -->
    <div class="search-box">
        <div class="search2">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" v-permission="'addRole'" @click="addRole">添加</el-button>
            </div>
        </div>
    </div>
    <!-- 表格 -->
    <div>
        <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
            <el-table-column prop="id" label="编号" width="60" />
            <el-table-column prop="name" label="角色名称" width="100" />
            <el-table-column prop="description" label="描述" width="100" />
            <el-table-column prop="adminCount" label="用户数" width="150" />
            <el-table-column prop="createTime" label="添加时间" width="240">
                <template #default="{ row }">
                    <span>{{ dateFormat(row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" width="100">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="switchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="{ row }">
                    <el-button text type="primary" v-permission="'allocMenu'"
                        @click="allocMenu(row.id)">分配菜单</el-button>
                    <el-button text type="primary" v-permission="'allocResource'"
                        @click="Resources(row.id)">分配资源</el-button>
                    <el-button text type="primary" v-permission="'editRole'" @click="editRole(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div>
        <ElConfigProvider :locale="locale">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </ElConfigProvider>
    </div>

    <!-- 添加角色 -->
    <EditRole :show="Editshow" :id="EditId" :row="EditRow" @edReShow="AfterSelect"></EditRole>

</template>
<script setup lang='ts'>
import { Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { RoleListApi, switchRoleStatusApi } from "./api";
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { dateFormat } from "@/utils/index";
import EditRole from './editRole.vue'
import router from "@/router";
import useTable from '@/hooks/useTable'


// 点击跳转分配资源
const Resources = (id: number) => {
    router.push(`/ums/allocResource?id=${id}`)
}

// 点击跳转分配菜单
const allocMenu = (id: number) => {
    router.push(`/ums/allocMenu?id=${id}`)
}




// 添加角色页显隐
const Editshow = ref(false)
// 添加角色页id
const EditId = ref<number | undefined>(0)

// 添加页选择后
const AfterSelect = (val: boolean,) => {
    Editshow.value = false;
    EditId.value = 0
    EditRow.value = {
        "adminCount": 0,
        "createTime": "",
        "description": "",
        "id": 0,
        "name": "",
        "sort": 0,
        "status": 0
    }
    if (val) ListFn();
}

// 点击添加
const addRole = () => {
    Editshow.value = true;
}

const EditRow = ref<IRoleListData | undefined>()
// 点击编辑
const editRole = (row: IRoleListData) => {
    Editshow.value = true;
    EditId.value = row.id;
    EditRow.value = row
}




// 分页器数据
const background = ref(false)
const locale = zhCn

// 关闭角色请求
const switchStatus = (row: IRoleListData) => {
    switchRoleStatusApi(row.id as number, row.status).then((res) => {
        if (res.code === 200) {
            ElMessage.success('状态修改成功')
        } else {
            row.status = row.status === 1 ? 0 : 1
        }
    }).catch(() => {
        row.status = row.status === 1 ? 0 : 1
    })
}

// 请求传入数据
// const queryParam = reactive<IUserListParams>({
//     keyword: '',
//     pageNum: 1,
//     pageSize: 10,
// })

// 请求得到的数据
// const roleList = ref<IRoleListData[]>([]);
// 得到的页数
// const total = ref(1)
// List



// 当前页数

// 请求函数
// const RoleListFn = () => {
// RoleListApi(queryParam).then((res) => {
//     if (res.code === 200) {
//         console.log('123', res);

//         // 角色页数据
//         roleList.value = res.data.list;
//         // 设置页数
//         total.value = res.data.total
//     }
// })
// }
const form = ref({
    keyword: ""
})
// RoleListFn();
// 页面载入时请求数据并且导出来（点击的刷新，与响应式数据）
let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle, ListFn } = useTable(RoleListApi, form.value)


// 重置
const Reset = () => {
    form.value.keyword = "";
    ListFn();
}





</script>
<style lang="less" scoped>
.search-box {
    box-shadow: 0 0 10px 0px #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;

    .search {
        padding: 20px 0px;
        display: flex;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 300px;
            margin-left: 40px;

            span {
                width: 125px;
                margin-right: 12px;
            }
        }
    }

    .search2 {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {

            span {
                line-height: 20px;
                font-size: 14px;
                align-items: center;
            }
        }


    }
}

:deep(.align-c),
:deep(.is-leaf) {
    .cell {
        text-align: center !important;
    }


}
</style>